<template>
  <!-- 委托评价首页 -->
  <span style="margin:10px 20px 20px 20px ; font-size:30px;width:80%">委托询价</span>
  <div style="background-color:white;width:80%;margin-bottom:200px">
    <div style="padding: 2rem;">
      <a-steps :current="current" :items="items"></a-steps>
      <div class="steps-content">
        <component :is="steps[current].content"></component>
      </div>
      <div class="steps-action">
        <a-button v-if="current < steps.length - 1" type="primary" @click="next">Next</a-button>
        <a-button v-if="current == steps.length - 1" type="primary" @click="message.success('Processing complete!')">
          Done
        </a-button>
        <a-button v-if="current > 0" style="margin-left: 8px" @click="prev">Previous</a-button>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { message } from 'ant-design-vue';
import PublishRequirements from './PublishRequirements.vue';
import pdf from '../pdf.vue';
import ServiceEvaluation from './ServiceEvaluation.vue'
import Pay from './Pay.vue'

const current = ref<number>(0);
const next = () => {
  current.value++;
};
const prev = () => {
  current.value--;
};
const steps = [
  {
    title: '授权协议',
    content: pdf,
  },
  {
    title: '发布需求',
    content: PublishRequirements,
  },
  {
    title: '费用支付',
    content: Pay,
  },
  {
    title: '服务评价',
    content: ServiceEvaluation,
  },

];
const items = steps.map(item => ({ key: item.title, title: item.title }));

</script>
<style scoped>
.steps-content {
  border-radius: 6px;
  min-height: 200px;
  text-align: center;

}

.steps-action {
  margin-top: 24px;
}
</style>